<template>
  <div class="emergency-map-province c-f">
    <h2 class="title">{{area.name}}医院地图</h2>
    <div class="card" style="height: 600px;" v-loading="map.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <div id="chart" style="width: 100%;height: 100%;"></div>
    </div>

    <div class="fr ac mt-20 mb-20">
      <h2 class="title f1">{{area.name}}医院信息</h2>
      <!--<div class="f-14 a link" @click="$router.push('/config/orgManage/hospital')">创建<i class="el-icon-arrow-right b ml-5"></i></div>-->
      <a class="f-14 a link ml-20" :href="`/api/hospital/batchexport?userid=${$store.state.user.userid}`">导出<i class="el-icon-arrow-right b ml-5"></i></a>
    </div>
    <div class="fr ac search-bar mb-20">
      <div class="fr ac item">
        <div class="label f-14">省市</div>
        <el-input v-model="hospital.params.provincecityname"/>
      </div>
      <div class="fr ac item">
        <div class="label f-14">医院名称</div>
        <el-input v-model="hospital.params.hospitalname"/>
      </div>
      <div class="fr ac item">
        <div class="label f-14">等级</div>
        <el-select v-model="hospital.params.grade">
          <el-option :value="1" label="二甲"/>
          <el-option :value="2" label="三甲"/>
          <el-option :value="3" label="三乙"/>
        </el-select>
      </div>
      <div class="fr ac item">
        <div class="label f-14">发热门诊</div>
        <el-select v-model="hospital.params.feverclinic">
          <el-option :value="1" label="是"/>
          <el-option :value="0" label="否"/>
        </el-select>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="getList(1)">搜索</el-button>
    </div>
    <div class="list" v-loading="hospital.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <table>
        <thead>
        <th colspan="4">医院名称</th>
        <th colspan="2">省市</th>
        <th colspan="2">区县</th>
        <th colspan="3">地址</th>
        <th colspan="2">等级</th>
        <th colspan="2">联系人</th>
        <th colspan="3">联系人电话</th>
        <th colspan="3">是否有发热门诊</th>
        <th colspan="2">病床</th>
        <th colspan="2">操作</th>
        </thead>
        <tbody>
        <tr v-for="item in hospital.list" :key="item.hospid">
          <td colspan="4">{{item.hospitalname}}</td>
          <td colspan="2">{{item.provincecityname}}</td>
          <td colspan="2">{{item.county}}</td>
          <td colspan="3">{{item.address}}</td>
          <td colspan="2">{{item.grade | grade}}</td>
          <td colspan="2">{{item.contacts}}</td>
          <td colspan="3">{{item.contactphone}}</td>
          <td colspan="3">{{item.feverclinic | whether}}</td>
          <td colspan="2">{{item.hospitalbed}}</td>
          <td colspan="2">
            <span @click="$router.push(`/emergency/map/detail/${item.hospid}`)">详情</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="tc mt-30 page">
      <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :disabled="hospital.loading" :pager-count="5" :page-size="5" :total="hospital.total" :current-page="hospital.current" @current-change="getList"/>
    </div>
  </div>
</template>

<script>
  import getMap from '@/utils/getMap'
  import list from '@/filter/valueList'

  export default {
    name: 'emergency-map-province',
    data () {
      return {
        chart: null,
        options: {
          tooltip: {
            show: true,
            formatter (params) {
              return `${params.seriesName}<br/>地区：${params.data.countyname || params.data.name}<br/>医院总数：${params.data.hospcount || '--'}<br/>发热门诊：${params.data.frcount || '--'}<br/>三甲医院：${params.data.sjcount || '--'}<br/>二甲医院：${params.data.ejcount || '--'}`
            }
          },
          legend: {
            show: false,
          },
          series: [{
            name: '',
            type: 'map',
            mapType: '', // 自定义扩展图表类型
            zoom: 0.9, //缩放
            roam: true,
            showLegendSymbol: true,
            label: { // 文字
              show: true,
              color: '#fff',
              fontSize: 10
            },
            itemStyle: {  //地图样式
              normal: {
                borderColor: 'rgba(147, 235, 248, 1)',
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: 'rgba(128, 217, 248, 1)',
                // shadowColor: 'rgba(255, 255, 255, 1)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10
              }
            },
            emphasis: { //鼠标移入动态的时候显示的默认样式
              itemStyle: {
                areaColor: '#FFD181',
                borderColor: '#404a59',
                borderWidth: 1
              }
            },
            data: null,
            x: 'center',
            y: 'center'
          }]
        },
        hospital: { // 医院
          list: [],
          current: 1,
          total: 0,
          countycode: '',
          loading: false,
          params: {
            hospitalname: '',
            grade: '',
            feverclinic: '',
            provincecityname:''
          }
        },
        area: {
          code: '',
          name: ''
        },
        map: {
          loading: false
        }
      }
    },
    methods: {
      init () {
        const { area } = this
        const { roleid, user } = this.$store.state

        if (roleid === 1001) {
          area.code = '100000'
          area.name = '全国'
        }
        else if (roleid === 1002) {
          area.code = user.provinceid + ''
          area.name = user.province
        }
        else {
          area.code = user.cityid + ''
          area.name = user.cityname
        }
        if (!area.code) return

        this.chart = this.$echarts.init(document.getElementById('chart'))
        this.chart.on('click', 'series.map', params => {
          const { code, countyname, name } = params.data
          if (!code) return
          if (code.replace(/^..../, '') !== '00') return
          this.area.code = code + ''
          this.area.name = countyname || name
          this.getMap(true)
          this.getList(1)
        })
        this.getMap()
        this.getList()
      },
      getList (current) {
        const item = this.hospital
        item.loading = true
        if (current) item.current = current
        return this.$http('hospital/fuzzyquery/page', { pagesize: 5, pagecurrent: item.current, ...item.params }).then(
          res => {
            const data = res.data.hospital
            item.list = data.records
            item.total = data.total
            item.loading = false
          }
        )
      },
      async getMap (refresh) {
        const { code, name } = this.area
        const serie = this.options.series[0]

        this.map.loading = true
        const map = await getMap(code, name)
        return this.$http('hospitalmap/count', { countycode: this.area.code }).then(
          res => {
            return map.features.map(item => {
              const data = res.data.find(v => v.code === (item.id || item.properties.adcode + ''))
              const { name } = item.properties
              return {
                ...data,
                name
              }
            })
          }
        ).then(
          data => {
            serie.data = data
            serie.name = `${name}数据`
            serie.mapType = name
            this.chart.setOption(this.options, refresh)
            this.map.loading = false
          }
        )
      }
    },
    filters: {
      grade (value) {
        if (!value) return ''
        return list.grade.find(v => v.value === value).name
      }
    },
    mounted () {
      this.init()
    }
  }
</script>

<style lang="less">
.emergency-map-province {
  .search-bar {white-space: nowrap;
    .item {margin-right: 25px;}
    .label {margin-right: 25px;}
  }
  .list {padding: 0 20px;background-color: #000418;
    table {table-layout: fixed;width: 100%;}
    th, td {padding: 20px 12px;font-size: 14px;border: 2px solid rgba(243, 246, 250, .2);
      &:first-child {border-left: 0;}
      &:last-child {border-right: 0;
        span {cursor: pointer;color: #2a36e0;}
        span + span {margin-left: 30px;}
      }
    }
    tr:last-child td {border-bottom: 0;}
    th {border-top: 0;
      color: rgba(255, 255, 255, .8);}
    td {text-align: center;}
  }
}
</style>
